<template>
	<view>

		<view class="header-space"></view>
		<!-- <vc-search  :placeholder="'输入关键词搜索'" @search="tosearch"></vc-search> -->
		<view class="flex">
			<image src="/static/images/homemaking/shop_banner.jpg" class="shop-banner"></image>
			<view class="cu-avatar xl round shop-logo bg-white shadow"
				:style="'background-image:url('+shop.shopLogo+');'"></view>
			<view class="shop-name c-radius">
				{{shop.shopName}}
			</view>
		</view>
		<view class="category-list cont-mt">
			<!-- 左侧分类导航 -->
			<scroll-view class="left" scroll-y="true">
				<view v-for="(item,index) in categoryList" :key="item.hktId" :class="[item.hktId==activeHktId?'on':'']"
					class="row" @tap="showCategory(item)">
					<view class="text" style="overflow: hidden;">
						{{ item.hktName }}
					</view>
				</view>
			</scroll-view>
			<!-- 右侧子导航 -->
			<scroll-view class="right" scroll-y="true">
				<view v-for="(category,index) in categoryList" v-show="category.hktId==activeHktId"
					:key="category.hktId" class="category">
				
					<view class="margin-top"><text
							class="text-blue cuIcon-sponsorfill margin-right-xs"></text>{{ category.label }}</view>
					<view class="list" v-show="curServList.length > 0 ">
						<view v-for="(item,i) in curServList" :key="i" class="box" @tap="toDetail(item)">
							<image v-if="item.coverPhoto" :src="item.coverPhoto" class="c-radius"></image>
							<image v-else src="/static/noPic.png" class="c-radius"></image>
							<view class="text">{{ item.servName }}</view>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>
<script>
	import vcSearch from '../../components/vc-search/vc-search.vue'
	import {
		getHousekeepingServList,
		getHousekeepingTypeList
	} from "../../api/homemaking/homemakingApi"
	import {
		getShops
	} from "../../api/shop/shopApi"
	import param from "../../constant/param"
	import mapping from "../../lib/java110/java110Mapping.js"


	export default {
		components: {
			vcSearch
		},

		data() {
			return {
				shopId: '',
				showCategoryIndex: 0,
				//分类列表
				categoryList: [],
				banner: '',
				shop: {},
				user_info: {},
				servList: [],
				curServList: [],
				// 选中的分类id
				activeHktId: ''
			}
		},
	 async onLoad(options) {
		 await this.vc.onLoad(options).then(_suc=>{},_err=>{});
			this.shopId = options.shopId;

			this.load_shop()
			this.initCateList();
			this._saveUserVisit();
		},
		methods: {
			//保存访问记录
			_saveUserVisit: function() {
				let _uname = "";
				let _uid = "";
				if (this.vc.hasLogin()) {
					_uname = getUserName();
					_uid = getUserId();
				} else {
					_uname = "匿名用户";
					_uid = "-1";
				}
				let data = {
					shopId: this.shopId,
					visitUserName: _uname,
					visitUserId: _uid
				};
				saveUserVisit(data).then()
			},
			load_shop: function() {
				var that = this;
				getShops({
						page: 1,
						row: 1,
						shopId: this.shopId
					})
					.then(_data => {
						that.shop = _data[0];
					})
			},
			initCateList() {
				let _that = this
				let params = {
					page: 1,
					row: 100,
					typeCd: param.MENU_TYPE.HOMEMAKING,
					shopId: this.shopId
				}
				getHousekeepingTypeList(params)
					.then(function(result) {
						_that.categoryList = result.data;
						_that._getHousekeepingServList();
					})
			},
			async _getHousekeepingServList() {
				let _that = this
				let params = {
					page: 1,
					row: 100,
					hktId: '',
					shopId: this.shopId
				}
				getHousekeepingServList(params)
					.then(function(result) {
						let servList = result.data;
						let _hktIds = "";
						_that.servList = servList;
						servList.forEach(function (item) {
						    _hktIds += item.hktId+",";
						});
						_that.categoryList = _that.categoryList.filter((item) => {
							return _hktIds.indexOf(item.hktId ) != -1
						});
						if(_that.categoryList.length > 0){
							_that.activeHktId = _that.categoryList[0].hktId
						}
						_that.curServList = servList.filter((item) => {
							return item.hktId == _that.activeHktId
						});
					})
			},
			//分类切换显示
			showCategory: function(category) {
				this.activeHktId = category.hktId;
				this.curServList = this.servList.filter((item) => {
					return item.hktId == category.hktId
				})
			},
			toDetail: function(e) {
				//uni.showToast({title: e.name,icon:"none"});
				uni.setStorageSync(mapping.CACHE_CURRENT_SERV, e)
				this.vc.navigateTo({
					url: '/pages/homemaking/detail?servId=' + e.servId + "&shopId=" + e.shopId
				});
			},
			//搜索跳转
			tosearch: function(e) {
				uni.navigateTo({
					url: `/pages/goods/HM-search`
				})
			}
		}
	}
</script>
<style lang="scss">
	.shop-banner {
		width: 100%;
		height: 400upx;
	}

	.shop-logo {
		position: absolute;
		left: 30upx;
		top: 40upx;
	}

	.shop-name {
		position: absolute;
		left: 30upx;
		top: 290upx;
		font-size: 60upx;
		height: 90upx;
		line-height: 90upx;
		padding: 5upx 20upx;
		background-image: linear-gradient(45deg, #a3cbf7, #ed1c24a6);
		color: #ffffff;
	}

	.category-list {
		//margin-top: 2.8rem;
		width: 100%;
		//background-color: #fff;
		display: flex;

		.left,
		.right {
			//position: absolute;
			//top: 100upx;
			//bottom: 0upx;
		}

		.left {
			width: 24%;
			left: 0upx;
			background-color: #fff;

			.row {
				width: 100%;
				height: 90upx;
				display: flex;
				align-items: center;
				padding: 0 10upx;

				.text {
					width: 100%;
					position: relative;
					font-size: 28upx;
					display: flex;
					justify-content: center;
					color: #3c3c3c;
					height: 60upx;
					line-height: 60upx;

					.block {
						position: absolute;
						width: 0upx;
						left: 0;
					}
				}

				&.on {
					height: 100upx;

					.text {
						font-weight: 600;
						background-color: #0081ff;
						border-radius: 60upx;
						color: white;
					}
				}
			}
		}

		.right {
			width: 76%;
			left: 24%;
			margin: 0 20upx;
			padding-top: 20upx;

			.category {
				width: 100%;

				.banner {
					width: 100%;
					height: 220upx;
					margin-bottom: 20upx;
					border-radius: 10upx;
					overflow: hidden;
					box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.3);

					image {
						width: 100%;
						height: 100%;
					}
				}

				.list {
					padding: 20upx 3%;
					margin-top: 40upx;
					width: 120%;
					display: flex;
					flex-wrap: wrap;
					background: white;
					border-radius: 10upx;

					.box {
						width: calc(71.44vw / 3);
						margin-bottom: 30upx;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-wrap: wrap;

						image {
							width: 60%;
							height: calc(71.44vw / 3 * 0.6);
						}

						.text {
							margin-top: 5upx;
							width: 100%;
							display: flex;
							justify-content: center;
							font-size: 26upx;
						}
					}
				}
			}
		}
	}
</style>
